<template>
	<el-tree :data="chapterNodes" v-bind="treeConfig" @node-click="handleNodeClick">
		<div class="custom-tree-node" slot-scope="{ node, data }">
			<template v-if="node.level === 1">
				<div class="label">第{{ node | numberFilter }}章：{{ data.name }}</div>
				<el-button type="text" size="medium" @click.stop="handleAddedNode(node, data)">添加节</el-button>
			</template>
			<template v-else>
				<div class="label">第{{ node | numberFilter }}节：{{ data.name }}</div>
			</template>
			<el-button type="text" size="medium" @click.stop="handleUpdateData(node, data)">编辑</el-button>
			<el-button type="text" size="medium" @click.stop="handleDeleteData(node, data)">删除</el-button>
		</div>
	</el-tree>
</template>

<script>
import { getChapterList, deleteChapter } from '@/api/course/sysCourseChapter';
export default {
	props: {
		courseId: { type: String, default: '' }
	},
	data() {
		return {
			checkedData: {},
			chapterNodes: [],
			treeConfig: {
				ref: 'tree',
				nodeKey: 'id',
				showCheckbox: true,
				checkStrictly: true,
				defaultExpandAll: true,
				checkOnClickNode: true,
				expandOnClickNode: false,
				class: 'chapter_tree_wrapper',
				props: {
					children: 'childList',
					disabled: (data, node) => {
						return data.type === '1';
					}
				}
			}
		};
	},
	filters: {
		numberFilter(node) {
			let siblingNodes = node.parent?.childNodes || [];
			if (siblingNodes.length > 0) {
				let nodeIndex = siblingNodes.findIndex((n) => {
					return n.data.id === node.data.id;
				});
				return nodeIndex + 1;
			}
		}
	},
	watch: {
		chapterNodes(data) {
			let datas = data[0]?.childList[0] || {};
			this.$nextTick(() => {
				this.checkedData = { ...datas };
				this.$refs['tree'].setCheckedKeys([datas.id]);
			});
		},
		checkedData(data) {
			this.$emit('handle', 'checked', data);
		}
	},
	mounted() {
		this.getChapterNodes();
	},
	methods: {
		//获取章节数据
		async getChapterNodes() {
			let params = { pid: '0', courseId: this.courseId };
			let result = await getChapterList(params).then((res) => res.data);
			if (result.code === '0') {
				this.chapterNodes = result.data || [];
			}
		},

		//选中树节点
		handleNodeClick(data, node, component) {
			if (data.type === '2' && node.level === 2 && node.isLeaf) {
				this.$refs['tree'].setCheckedKeys([data.id]);
				this.checkedData = { ...data };
			} else {
				node.expanded = !node.expanded;
			}
		},

		//添加节
		handleAddedNode(node, data) {
			this.$emit('handle', 'node', data);
		},

		//编辑章节
		handleUpdateData(node, data) {
			this.$emit('handle', 'edit', data);
		},

		//删除章节
		handleDeleteData(node, data) {
			let that = this;
			let delTips = () => {
				if (node.level === 1 && !node.isLeaf) {
					return '确定删除课程章';
				} else {
					return '确定删除课程节';
				}
			};
			this.$confirm(delTips(), '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteChapterRequest(data.id);
						instance.confirmButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//删除章节请求
		async deleteChapterRequest(id) {
			let result = await deleteChapter(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除成功');
				this.getChapterNodes();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.chapter_tree_wrapper::v-deep {
	height: calc(100% - 41px);
	overflow-y: auto;
	.el-tree-node.is-checked {
		background-color: var(--primary-background-plain-disabled);
	}
	.el-tree-node__content {
		height: 36px;
		padding-right: 6px;
	}
	.el-checkbox {
		display: none;
	}
}
.custom-tree-node {
	display: flex;
	align-items: center;
	width: 100%;
	.label {
		flex: 1;
		height: 36px;
		line-height: 36px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.el-button {
		padding: 6px;
		margin-left: 0;
	}
}
</style>
